<template>
  <div class="text-base font-semibold leading-7 text-gray-900">
    {{ $t('pageInventory.systemIndicator.sectionTitle') }}
  </div>
  <el-row class="mt-6 mb-10">
    <el-col :span="12">
      <dl>
        <dt class="block text-sm font-medium leading-6 text-gray-900">
          {{ $t('pageInventory.systemIndicator.powerStatus') }}
        </dt>
        <dd class="block text-sm font-light leading-6 text-gray-900">
          {{ $t(powerStatus) }}
        </dd>
      </dl>
    </el-col>
    <el-col :span="12">
      <dl>
        <dt class="block text-sm font-medium leading-6 text-gray-900">
          {{ $t('pageInventory.systemIndicator.identifyLed') }}
        </dt>
        <el-switch
          v-model="systems.locationIndicatorActive"
          class="mr-2"
          style="--el-switch-on-color: #13ce66"
          @change="toggleIdentifyLedSwitch"
        />
        <span v-if="systems.locationIndicatorActive">
          {{ $t('global.status.on') }}
        </span>
        <span v-else>{{ $t('global.status.off') }}</span>
      </dl>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { useGlobalStore } from '@/store/global';
import { useSystemStore } from '@/store/SystemManagement/SystemInformation/SystemStore';

const globalStore = useGlobalStore();
const systemStore = useSystemStore();

systemStore.getSystem();
const systems = computed(() => {
  const systemData = systemStore.systems[0];
  return systemData ? systemData : {};
});

const serverStatus = computed(() => globalStore.serverStatus);
const powerStatus = computed(() => {
  if (serverStatus.value === 'unreachable') {
    return `global.status.off`;
  }
  return `global.status.${serverStatus.value}`;
});

const toggleIdentifyLedSwitch = (state: any) => {
  systemStore
    .changeIdentifyLedState(state)
    .catch(({ message }: { message: string }) => {
      ElNotification({
        title: 'Error',
        message: message,
        type: 'error',
      });
    });
};
</script>
